import React , {Component} from 'react';
import './css.component/tab.scss';
class TabComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {
            Comp: []
        }
    }
    static defaultProps = {
        name: 'GJKLJ'
      }
    handleClick(index){
        this.props.tabs.map( (item,i) => {
            if(i == index){
                item.active = true ;
            }else{
                item.active = false ;
            }
        })
        this.setState({
            Comp:this.props.tabs
        })
    }
    componentDidMount(){
        this.setState({
            Comp:this.props.tabs
        })
    }
    componentWillReceiveProps(){
        alert('1')
    }
    render(){
        return (
            <div>
                <ul>
                {
                        this.state.Comp.map( (Item,index) => 
                            <li className={Item.active ? 'active' : ''} key={index} onClick={this.handleClick.bind(this,index)}>
                                {Item.name}
                            </li>
                        )
                    }
                </ul>
                <ul>
                    {
                        this.state.Comp.map( (Item,index) => 
                            <li className={Item.active ? 'active' : ''} key={index} onClick={this.handleClick.bind(this,index)}>
                                <Item.component></Item.component>
                            </li>
                        )
                    }
                </ul>
            </div>
        );
    }
}

export default TabComponent;